import React, { useState, useEffect, useRef, useMemo } from "react";
import "./Header.css";
import { LeftOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";

export default function SearchBar() {
  const navigate = useNavigate();
  const [texts, setTexts] = useState(["购好物，享生活", "每天一购物，生活更美好"]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const textRef = useRef(null);
  useEffect(() => {
    const intervalId = setInterval(() => {
      // 切换到下一个文本
      setCurrentIndex((prevIndex) => (prevIndex + 1) % texts.length);
    }, 2000); // 每 2 秒切换一次
    return () => clearInterval(intervalId); // 清理定时器
  }, [texts]);
  return (
    <div>
      <header>
        <LeftOutline
          style={{ color: "white", fontSize: "30px" }}
          onClick={() => {
            navigate("/fen");
          }}
        />
        <div
          className="header_ipt"
          onClick={() => {
            navigate("/search");
          }}
        >
          <input type="text" className="inp" readOnly ref={textRef} />
          <span className="header_text">{texts[currentIndex]}</span>
        </div>
      </header>
    </div>
  );
}
